<template>
	<view class="mine-container">
		<!-- 用户信息区域 -->
		<view class="user-section">
			<image :src="user.avatar" class="user-avatar" mode="aspectFill" />
			<view class="user-info">
				<view class="user-name">{{ user.name }}</view>
				<view :class="['user-tag', user.vip ? 'vip' : 'normal']">
					<uni-icons v-if="user.vip" type="vip-filled" size="20" color="#b49600" />
					<text>{{ user.vip ? 'VIP Member' : 'User' }}</text>
				</view>
			</view>
		</view>

		<!-- 统计信息 -->
		<view class="stats-section">
			<view class="stat-item" @tap="goFavorites">
				<view class="stat-number">{{ user.favorites }}</view>
				<view class="stat-label">Favorites</view>
			</view>
			<view class="stat-item" @tap="goHistory">
				<view class="stat-number">{{ user.history }}</view>
				<view class="stat-label">History</view>
			</view>
			<view class="stat-item" @tap="goDownloads">
				<view class="stat-number">{{ user.downloads }}</view>
				<view class="stat-label">Downloads</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @tap="goSettings">
					<view class="menu-icon"><uni-icons type="setting" size="28" color="#ccc" /></view>
					<view class="menu-text">Settings</view>
					<view class="menu-arrow"><uni-icons type="right" size="24" color="#666" /></view>
				</view>
				<view class="menu-item" @tap="goAbout">
					<view class="menu-icon"><uni-icons type="information" size="28" color="#ccc" /></view>
					<view class="menu-text">About Us</view>
					<view class="menu-arrow"><uni-icons type="right" size="24" color="#666" /></view>
				</view>
			</view>

			<view class="menu-group">
				<view class="menu-item" @tap="goFeedback">
					<view class="menu-icon"><uni-icons type="chat" size="28" color="#ccc" /></view>
					<view class="menu-text">Feedback</view>
					<view class="menu-arrow"><uni-icons type="right" size="24" color="#666" /></view>
				</view>
				<view class="menu-item" @tap="logout">
					<view class="menu-icon"><uni-icons type="logout" size="28" color="#FE2B54" /></view>
					<view class="menu-text logout">Logout</view>
					<view class="menu-arrow"></view>
				</view>
			</view>
		</view>

		<!-- 版本信息 -->
		<view class="version-info">Version 1.0.0</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					avatar: '/static/logo.png',
					name: 'huoxingshi',
					vip: true,
					favorites: 42,
					history: 156,
					downloads: 8
				}
			};
		},
		methods: {
			goFavorites() {
				// TODO: 跳转到收藏页面
				console.log('Go to favorites');
			},
			goHistory() {
				// TODO: 跳转到历史记录页面
				console.log('Go to history');
			},
			goDownloads() {
				// TODO: 跳转到下载页面
				console.log('Go to downloads');
			},
			goSettings() {
				// TODO: 跳转到设置页面
				console.log('Go to settings');
			},
			goAbout() {
				// TODO: 跳转到关于我们页面
				console.log('Go to about');
			},
			goFeedback() {
				// TODO: 跳转到反馈页面
				console.log('Go to feedback');
			},
			logout() {
				uni.showModal({
					title: 'Logout',
					content: 'Are you sure you want to logout?',
					confirmText: 'Yes',
					cancelText: 'No',
					success: (res) => {
						if (res.confirm) {
							// TODO: 执行退出登录逻辑
							console.log('Logout confirmed');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-container {
		background: #121212;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	.user-section {
		background: #1e1e1e;
		display: flex;
		align-items: center;
		padding: 40rpx 32rpx;
		margin-bottom: 20rpx;

		.user-avatar {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			background: #333;
			object-fit: cover;
		}

		.user-info {
			margin-left: 32rpx;
			flex: 1;

			.user-name {
				font-size: 36rpx;
				color: #ccc;
				font-weight: 500;
				margin-bottom: 12rpx;
			}

			.user-tag {
				padding: 0 20rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				border-radius: 24rpx;
				font-size: 26rpx;
				font-weight: 500;

				&.vip {
					background: linear-gradient(90deg, #FFD700, #FFEF8F);
					color: #B8860B;
					border: none;
				}

				&.normal {
					background: #333;
					color: #ccc;
					border: 1rpx solid #555;
				}
			}
		}
	}

	.stats-section {
		background: #1e1e1e;
		display: flex;
		padding: 32rpx 0;
		margin-bottom: 20rpx;

		.stat-item {
			flex: 1;
			text-align: center;
			cursor: pointer;

			.stat-number {
				font-size: 40rpx;
				color: #ccc;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.stat-label {
				font-size: 28rpx;
				color: #999;
			}
		}
	}

	.menu-section {
		background: #1e1e1e;
		margin-bottom: 20rpx;

		.menu-group {
			border-bottom: 1rpx solid #333;

			&:last-child {
				border-bottom: none;
			}

			.menu-item {
				display: flex;
				align-items: center;
				padding: 36rpx 32rpx;
				cursor: pointer;

				.menu-icon {
					margin-right: 24rpx;
				}

				.menu-text {
					flex: 1;
					font-size: 32rpx;
					color: #ccc;
				}

				.menu-text.logout {
					color: #FE2B54;
				}

				.menu-arrow {
					flex-shrink: 0;
				}
			}
		}
	}

	.version-info {
		text-align: center;
		font-size: 26rpx;
		color: #666;
		margin-top: 60rpx;
	}
</style>
